<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      crossorigin="anonymous">

<body>

<div id="app">
    {{info}}}
    <table class="table table-striped" id="table" >
        <thead>
        <tr>
            <th scope="col">id</th>
            <th scope="col">部门</th>
            <th scope="col">姓名</th>
            <th scope="col">Emil</th>
            <th scope="col">手机号码</th>
            <th scope="col">性别</th>
            <th scope="col">登录时间</th>
            <th scope="col">登录Ip</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr V-for="item in info">
            <th scope="row">{{item.user_id}}</th>
            <td>{{item.dept_name}}</td>
            <td>{{item.user_name}}</td>
            <td>{{item.email}}</td>
            <td>{{item.phonenumber}}</td>
            <td>{{item.sex  === 1 ? '女' : '男'}}</td>
            <td>{{item.login_date}}</td>
            <td>{{item.login_ip}}</td>

            <td>
                <div class="dropdown">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-toggle="dropdown" aria-expanded="false">
                        选项
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">

                        <a class="dropdown-item" data-target="#myModal" data-toggle="modal">修改</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#exampleModal">删除</a>
                        <a class="dropdown-item" data-toggle="modal" data-target="#myModal1">新增</a>

                    </div>
                </div>
            </td>

        </tr>

        </tbody>
    </table>
    <!--修改-->
    <div class="modal fade" id="myModal" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <form id="formData" class="form-horizontal">
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="control-label col-lg-2">开始</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="username"
                                       class="form-control"></br>

                                <input type="time" value="" name="username"
                                       class="form-control"></br>

                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-lg-2">结束</label>
                            <div class="col-lg-9">
                                <input type="date" value="" name="password" class="form-control">
                                <input type="time" value="" name="username"
                                       class="form-control"></br>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                        <button class="btn btn-success" type="button" onclick="">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--    删除-->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    是否删除？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">否</button>
                    <button type="button" class="btn btn-primary">是</button>
                </div>
            </div>
        </div>
    </div>


    <!--    新增-->
    <div class="modal fade" id="myModal1" aria-labelledby="myModallabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">新增信息</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>

                </div>
                <form id="formData1" class="form-horizontal">
                    <div class="modal-body pre-scrollable">
                        <div class="form-group">
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16">
                                    <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                    <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
                                </svg>
                                <label  class="form-label"> 登陆名</label>
                                <input  class="form-control" ref="loginname">
                            </div>

                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pc-display-horizontal" viewBox="0 0 16 16">
                                    <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v7A1.5 1.5 0 0 0 1.5 10H6v1H1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5v-1h4.5A1.5 1.5 0 0 0 16 8.5v-7A1.5 1.5 0 0 0 14.5 0h-13Zm0 1h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5ZM12 12.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0ZM1.5 12h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1ZM1 14.25a.25.25 0 0 1 .25-.25h5.5a.25.25 0 1 1 0 .5h-5.5a.25.25 0 0 1-.25-.25Z"/>
                                </svg>
                                <label  class="form-label"> 密码</label>
                                <input type="password" class="form-control" ref="password">
                            </div>
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
                                    <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                                    <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
                                    <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
                                </svg>
                                <label class="form-label">用户姓名</label>
                                <input  class="form-control" ref="username" aria-describedby="emailHelp">
                            </div>
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-heart" viewBox="0 0 16 16">
                                    <path d="M9 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-9 8c0 1 1 1 1 1h10s1 0 1-1-1-4-6-4-6 3-6 4Zm13.5-8.09c1.387-1.425 4.855 1.07 0 4.277-4.854-3.207-1.387-5.702 0-4.276Z"/>
                                </svg>
                                <label class="form-label"> 性别</label>：
                                <select class="form-select" ref="sex" aria-label="Default select example">
                                    <option value="0">男</option>
                                    <option value="1">女</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-projector" viewBox="0 0 16 16">
                                    <path d="M14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM2.5 6a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Zm0 2a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"/>
                                    <path d="M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2 1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1H5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1 2 2 0 0 1-2-2V6Zm2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H2Z"/>
                                </svg>
                                <label class="form-label"> Email</label>
                                <input type="email" class="form-control" ref="email" aria-describedby="emailHelp">
                              </div>
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-send" viewBox="0 0 16 16">
                                    <path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
                                </svg>
                                <label  class="form-label">手机号码</label>
                                <input  class="form-control" ref="phone">
                            </div>
                            <div class="mb-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stickies" viewBox="0 0 16 16">
                                    <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5V13a1 1 0 0 0 1 1V1.5a.5.5 0 0 1 .5-.5H14a1 1 0 0 0-1-1H1.5z"/>
                                    <path d="M3.5 2A1.5 1.5 0 0 0 2 3.5v11A1.5 1.5 0 0 0 3.5 16h6.086a1.5 1.5 0 0 0 1.06-.44l4.915-4.914A1.5 1.5 0 0 0 16 9.586V3.5A1.5 1.5 0 0 0 14.5 2h-11zM3 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5V9h-4.5A1.5 1.5 0 0 0 9 10.5V15H3.5a.5.5 0 0 1-.5-.5v-11zm7 11.293V10.5a.5.5 0 0 1 .5-.5h4.293L10 14.793z"/>
                                </svg>
                                <label  class="form-label"> 备注</label>
                                <input  class="form-control" ref="remark">
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-default" type="button" data-dismiss="modal">关闭</button>
                        <button class="btn btn-success" type="button" @click="insert()">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>


<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

<script>

        //默认加载
        new Vue({
            el: '#app',
            data() {
                return {
                    info: null
                }
            },
            mounted() {
                axios.post('userSelectAllYu')
                    .then(response => (this.info = response.data))

                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            methods:{

                insert:function (){
                    this.$http.post('userInsertYu', {
                            loginName: this.$refs.loginname.value, password: this.$refs.password.value,
                            userName: this.$refs.username.value, sex: this.$refs.sex.value, email: this.$refs.email.value,
                            phonenumber: this.$refs.phone.value, remark: this.$refs.remark.value
                        }
                        , {emulateJSON: true})
                        .then(function (logion){
                            debugger
                            if(logion.body==1){
                                alert("新增成功")
                            }
                        })

                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }

            }
        })

</script>



</body>
</html>